require('../fonts/iconfont.css')
require('../less/sprotData.less')
const {
    $http
} = require('../lib/commonJs/http.js')
const utils = require('../lib/commonJs/utils.js')

utils.isLogin()

// 柱状图
function histogram(timer,sprotAlltimer) {
    // 创建echarts
    const histogram = echarts.init(document.querySelector('#histogram'))

    // 设置option配置
    let option = {
        title: {
            text: '近7天运动时长',
            textStyle: {
                fontSize: 14
            },
        },
        xAxis: {
            type: 'category',
            data: timer
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: sprotAlltimer,
            type: 'bar'
        }],
        grid: {
            top: "50px",
            left: "12%",
            right: "10%",
            bottom: "10%"
        }
    }

    histogram.setOption(option);
}
// 圆形图

function circleGraph(data) {
    // 创建echarts
    const circleGraph = echarts.init(document.querySelector('#circleGraph'))

    // 设置option配置
    let option = {
        title: {
            text: '运动分类',
            textStyle: {
                fontSize: 14
            },
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            top:'center'
        },
        series: [
            {
                name: '运动',
                type: 'pie',
                radius: '90%',
                data: data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                labelLine: {
                    show: false
                },
                label: {
                    position: 'inside',
                    formatter:'{d}%'
                },
            }
        ]
    };

    circleGraph.setOption(option);
}

// 折线图
function lineChart(date,data) {
    // 创建echarts
    const lineChart = echarts.init(document.querySelector('#lineChart'))

    // 设置option配置
    let option = {
        title: {
            text: '近7天运动时长',
            textStyle: {
                fontSize: 14
            },
        },
        xAxis: {
            type: 'category',
            data: date
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: data,
            type: 'line'
        }],
        grid: {
            top: "50px",
            left: "12%",
            right: "10%",
            bottom: "10%"
        }
    };

    lineChart.setOption(option);
}

$http.get(`/sport/data/${localStorage.getItem('userId')}`,({status,data})=>{
    if(status === 0){

        console.log(data);
        // 获取时间
        let timer = data.days.map(item => {
            return (item.date).substring(5)
        });
        // 获取运动总时间
        let sprotAlltimer = data.days.map(item => {
            return item.dayTimes
        });
        // 显示echarts
        histogram(timer,sprotAlltimer)

        // 设置对象,统计各项目训练时间
        let sprotTimer = {
            '跑步' : 0,
            '骑行' : 0,
            '训练' : 0
        }

        data.days.map(item => {
            item.exerciseData.map(v => {
                // 如果对象有就将time加进去
                sprotTimer[v.type] += +v.time
            })
        });

        // 更改成echarts识别数据
        let sprotTimerArr = []
        for(let item in sprotTimer){
            sprotTimerArr.push({
                value:sprotTimer[item],
                name:item
            })
        }
        // 渲染饼图
        circleGraph(sprotTimerArr)

        // 统计运动次数
        let sprotNumber = {}
        // 运动次数
        let sprotNumberArr = []
        // 运动日期
        let sprotNumberTimerArr = []

        data.days.map(item => {
            item.exerciseData.map(v => {
                // 如果对象没有该建就初始化
                if(!sprotNumber[v.date])sprotNumber[v.date] =0
                // 有就加值
                sprotNumber[v.date] += +v.numberoftimes
            })
        });
        // 格式化数据
        for(let key in sprotNumber){
            sprotNumberTimerArr.push(key.substring(5)),
            sprotNumberArr.push(sprotNumber[key])
        }
        // 添加折线图
        lineChart(sprotNumberTimerArr,sprotNumberArr);
    }
})